import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View, Image} from '@tarojs/components'
import {AtInput} from "taro-ui";
import GzhAuth from "../../../components/gzh-auth/gzh-auth"
import {GetRequest, vcmonitor} from "../../../utils/tools";
import {INVOICE_EMAIL, RESOURCE_URL} from "../../../constants/api";
import {http} from "../../../utils/http";
import './invoice.scss'

interface StateType {
  id: any
  url: any
  showSend: any
  email: any
}

export default class SendEmail extends Component {
  state: StateType = {
    id: '',
    email: '',
    showSend: false,
    url: ''
  }

  async UNSAFE_componentWillMount() {
    vcmonitor(this)
    this.setState({ id: Taro.getCurrentInstance().router.params.id || '', url: Taro.getCurrentInstance().router.params.url || '' })
  }

  async sendEmail(){
    try{
      const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      const flag = reg.test(this.state.email)
      if (!flag){
        Taro.showToast({ title: '请填写正确的邮箱地址', icon: 'none' })
        return
      }
      Taro.showLoading({ title: '发送中...' })
      const data = await http.HPost(INVOICE_EMAIL, { invoice_id: this.state.id, email: this.state.email})
      if (data) {
        Taro.showToast({ title: '发票已发送至您的邮箱，请注意查收！' })
        this.setState({ showSend: false, email: '' })
      } else {
        Taro.hideLoading()
      }
    } catch (e) {
      Taro.hideLoading()
    }
  }

  handleChange(email){
    this.setState({ email })
  }

  render() {
    const { url, showSend, email } = this.state
    return (
      <View className='Invoice-Information-order-send-email'>
        <GzhAuth />
        <View style='height: 10px' />
        <View className='Invoice-Information-order-send-email-wrapper'>
          <Image src={RESOURCE_URL + '/upload/images/20211221/1640049097154_389.png'} onClick={()=>{ this.setState({ email: '', showSend: true }) }} mode='widthFix' className='invoice-img-download' />
          <Image src={url} mode='widthFix' className='invoice-img' />
          <View className='jagged' />
        </View>
        { showSend && <View className='showSend-wrapper'>
          <View className='showSend-wrapper-top'>
            <View className='showSend-wrapper-top-content'>
              <View className='title'>发送到邮箱</View>
              <View className='sub-title'>提交成功后，系统会自动将您的发票文件发送至您的邮箱中</View>
            </View>
            <AtInput
              type='text'
              className='email-input'
              placeholder='请填写正确的邮箱地址'
              value={email}
              onChange={this.handleChange.bind(this)}
            />
            <View className='btn-bottom-box'>
              <View className='cancel' onClick={()=>{ this.setState({ showSend: false }) }}>取消</View>
              <View className='send' onClick={this.sendEmail.bind(this)}>发送</View>
            </View>
          </View>
          <View className='showSendOverLay' onClick={()=>{ this.setState({ showSend: false }) }} />
        </View> }
      </View>
    )
  }
}
